<template>
  <div class="home">
    <div class="card">
      <MyIntroductionCard />
    </div>
    <div class="main-header"></div>
    <div class="wave">
      <div class="arrow-down" @click="clickQuotation">
        <img src="@/assets/arrow-down.png" alt="down">
      </div>
      <div class="tip">
        滑动到下方查看博客文章
      </div>
      <div class="banner_wave_1"></div>
      <div class="banner_wave_2"></div>
    </div>
    <div id="contentBox">
      <all-article></all-article>
    </div>
    <MyFooter></MyFooter>
  </div>

</template>

<script lang="ts">
import { defineComponent, nextTick, ref, onMounted, reactive, watch, onUnmounted, onActivated, onDeactivated } from 'vue';
import MyIntroductionCard from '@/components/MyIntroductionCard.vue';
import MyFooter from '../components/MyFooter.vue';
import AllArticle from './AllArticle.vue';
    
export default defineComponent({
  name: "Home",
  components: {
    MyIntroductionCard,
    MyFooter,
    AllArticle
  },
  setup() {
    function clickQuotation() {
      nextTick(() => {
        document.getElementById("contentBox")?.scrollIntoView({ behavior: 'smooth' })
      })
    }
    return {
      clickQuotation,
      hstyle: {
        "font-size": "18px", "color": "#F0BEE6", "flex": "0", "font-weight": "bold", "text-align": "left"
      },
    }
  }
});
</script>
<style lang="less">
.home {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden hidden;
}

.card {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.main-header {
  --highlighted-line-bg: #d1e3c9;
  --highlighted-line-bg-dark: #264b33;
  --cnblogs-toc-bg-color: rgba(245, 245, 245, .98);
  --cnblogs-toc-highlight-color: rgba(255, 255, 255, .9);
  --cnblogs-toc-color: #000;
  --olcb-folder-code-block-max-height: 80vh;
  font-size: 9pt;
  color: #314659;
  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  text-align: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 1px 2px rgba(150, 150, 150, .7);
  background-image: url("https://s1.ax1x.com/2022/08/03/vZlCLR.jpg");
}

.wave {
  --highlighted-line-bg: #d1e3c9;
  --highlighted-line-bg-dark: #264b33;
  --cnblogs-toc-bg-color: rgba(245, 245, 245, .98);
  --cnblogs-toc-highlight-color: rgba(255, 255, 255, .9);
  --cnblogs-toc-color: #000;
  --olcb-folder-code-block-max-height: 80vh;
  font-size: 9pt;
  color: #314659;
  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  margin: 0;
  padding: 0;
  position: absolute;
  height: 110px !important;
  width: 100%;
  top: calc(100vh - 110px);
  z-index: 99;
  display: block;

  .arrow-down {
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    text-align: center;
    animation: float 2s linear infinite;
    z-index: 100;
    cursor: pointer;
  }

  .tip {
    position: absolute;
    top: -20px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(34, 34, 34, 0.7);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font: bold;
    font-size: 18px;
  }

  @keyframes float {
    0% {
      top: 0px
    }

    50% {
      top: 10px
    }

    100% {
      top: 0px
    }
  }

  .banner_wave_1 {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 200%;
    height: 120px;
    top: 20px;
    left: -100%;
    opacity: 1;
    animation: water-right 20s infinite linear;
    background: url("~@/assets/wave2.png") repeat-x;
  }

  .banner_wave_2 {
    --highlighted-line-bg: #d1e3c9;
    --highlighted-line-bg-dark: #264b33;
    --cnblogs-toc-bg-color: rgba(245, 245, 245, .98);
    --cnblogs-toc-highlight-color: rgba(255, 255, 255, .9);
    --cnblogs-toc-color: #000;
    --olcb-folder-code-block-max-height: 80vh;
    font-size: 9pt;
    color: #314659;
    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 200%;
    height: 100%;
    top: 30px;
    left: 0;
    opacity: 1;
    animation: water-left 30s infinite linear;
    background: url("~@/assets/wave1.png") repeat-x;
  }

  @keyframes water-left {
    0% {
      transform: translate(0, 0)
    }

    100% {
      transform: translate(-50%, 0);
    }
  }
}
</style>
